<template>
  <div class="roomsetting-form">
    <Form
      ref="formRoomSetting"
      :model="formRoomSetting"
      :rules="ruleRoomSetting"
    >
      <FormItem label="游戏模式" prop="mode">
        <RadioGroup v-model="formRoomSetting.mode">
          <Radio label="VERSUS" border>竞赛</Radio>
          <Radio label="COOR" border disabled>合作</Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="游戏难度" prop="difficulty">
        <RadioGroup v-model="formRoomSetting.difficulty">
          <Radio label="EASY">
            <span>简单</span>
          </Radio>
          <Radio label="MEDIUM">
            <span>中等</span>
          </Radio>
          <Radio label="HARD">
            <span>困难</span>
          </Radio>
          <Radio label="VERY_HARD">
            <span>专家</span>
          </Radio>
        </RadioGroup>
      </FormItem>
      <FormItem label="最大玩家数" prop="maxPlayer">
        <br />
        <Slider
          :min="curPlayer"
          v-model="formRoomSetting.maxPlayer"
          show-input
          disabled
        ></Slider>
      </FormItem>
    </Form>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch, Emit } from 'vue-property-decorator'

import { playerModule } from '@/store'
import { GameMode, Difficulty, RoomSettingInput } from '@/types'

export interface FormRoomSetting {
  mode: GameMode
  difficulty: Difficulty
  maxPlayer: number
}

@Component({
  model: {
    prop: 'formRoomSetting',
    event: 'formChanged'
  }
})
export default class RoomSettingForm extends Vue {
  @Prop({ default: 1 }) readonly curPlayer!: number
  @Prop() readonly formRoomSetting!: FormRoomSetting
  private newFormRoomSetting = this.formRoomSetting

  private ruleRoomSetting = {
    mode: [
      {
        required: true
      }
    ],
    difficulty: [
      {
        required: true
      }
    ],
    maxPlayer: [
      {
        required: true
      }
    ]
  }

  @Watch('newFormRoomSetting')
  onFormRoomSettingChanged() {
    this.formChanged(this.newFormRoomSetting)
  }

  @Emit('formChanged')
  formChanged(form: FormRoomSetting) {}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.roomsetting-form {
  display: flex;
  justify-content: center;
}
</style>
